<template>
	<el-container class="my-container">
		<el-row class="container-row">
			<el-col :span="12">
				<el-header>
					<el-form :inline="true">
						<el-form-item label="">
							<el-select
								v-model="questionKey"
								@change="questionChange"
							>
								<el-option
									v-for="item in questionList"
									:key="item.questionId"
									:label="item.questionName"
									:value="item.questionId"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-header>

				<iframe
					class="question-content"
					:srcdoc="questionContent"
				></iframe>
			</el-col>
			<el-col :span="12">
				<run-dialog ref="runDialog"></run-dialog
			></el-col>
		</el-row>
	</el-container>
</template>

<script>
import runDialog from "./run";

export default {
	components: {
		runDialog,
	},
	data() {
		return {
			questionList: [],
			questionKey: "",
			questionContent: "",
		};
	},
	computed: {},
	beforeUnmount() {},
	mounted: function () {
		this.renderQuestion();
	},
	methods: {
		async renderQuestion() {
			var res = await this.$API.question.availableList.get();
			this.questionList = res.data;
		},
		async questionChange(data) {
			await this.renderQuestionContent(data);
			await this.$refs.runDialog.renderLangs(data);
		},
		async renderQuestionContent(data) {
			var res = await this.$API.question.detail.get(data);
			this.questionContent = res.data.questionDescribe;
		},
	},
};
</script>
<style scoped>
.container-row {
	width: 100%;
	height: 100%;
	font-size: 15px !important;
	background-color: white;
}
.my-container {
	width: 100%;
	height: 100%;
}
.question-content {
	padding: 20px;
}
.question-content {
	width: calc(100% - 40px);
	height: calc(100% - 100px);
	border: none;
	overflow: auto;
}
</style>
